<template>
	<div class="personBox">
		<div class="header">
			<span class="title">个人资料</span>
		</div>
		<div class="body">
			<div class="item_inline">
				<div class="label letter">
					头像
				</div>
				<div class="item">
					<img :src="user.cPortrait" alt="">
					<div class="edit">
						<el-upload :show-file-list="false" class="upload-demo"
							action="https://mallmgt.inja.com/api/score/uApi/type/uploadheadimg" name="upfile"
							:data="data" :on-success="uploadsuccess">
							点击修改头像
						</el-upload>
					</div>
				</div>
			</div>
			<div class="item_inline">
				<div class="label letter">
					用户
				</div>
				<div class="item">
					{{ user.cUserName }}
				</div>
			</div>
			<div class="item_inline">
				<div class="label letter">
					账号
				</div>
				<div class="item">
					{{ user.cPhone }}
				</div>
			</div>
		<!-- 	<div class="item_inline">
				<div class="label letter">
					昵称
				</div>
				<div class="item">
					<input v-model="NickName" type="text">
				</div>
			</div> -->
			<!-- <div class="item_inline">
				<div class="label letter">性别</div>
				<div class="sex_item">
					<div>
						<div class="dot" :class="{ active: sex == 1 }" />
						<div>男</div>
					</div>
					<div>
						<div class="dot" :class="{ active: sex == 2 }" />
						<div>女</div>
					</div>
				</div>
			</div> -->
			<div class="item_inline">
				<div class="label">
					手机号
				</div>
				<div class="item">
					<input v-model="user.cPhone" type="text" readonly="readonly">
					<div class="edit" @click="toUpdate">
						更换号码
					</div>
				</div>
			</div>
			<div class="item_inline">
				<div class="label letter">
					邮箱
				</div>
				<div class="item">
					<input v-model="user.cEmail" type="text" placeholder="还没有绑定邮箱" readonly="readonly">
					<div class="edit" @click="toUpdate('email')">
						更改绑定
					</div>
					
				</div>
			</div>
			<div class="item_inline">
				<div class="label letter">
					等级
				</div>
				<div class="item">
					<input v-model="user.cMemberLevelName" type="text" readonly>
				</div>
			</div>
			<div class="item_inline">
				<div class="label">
					当前积分
				</div>
				<div class="item">
					<input v-model="user.iPoints" type="text" readonly>
				</div>
			</div>
			<div class="item_inline">
				<div class="label">
					出生日期
				</div>
				<div class="item">
					<input v-model="user.dBirthday" type="date">
				</div>
			</div>
			<!-- 	<div class="item_inline">
				<div class="label">
					消费总额
				</div>
				<div class="item">
					<input v-model="amount" type="text">
				</div>
			</div> -->
		</div>
		<div class="footer">
			<div class="submit" @click="userSave">
				确认
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// nickname: '一千三的暴风大剑',
				sex: 1,
				phone: 13521508412,
				mail: "121314151617@qq.com",
				level: "铂金会员",
				score: 1300,
				amount: "19201080.00",
				avatar: "",
				cQQ: "",
				dBirthday: "",
				data: {
					uid: "",
				},
				user: {},
				NickName:''
			};
		},
		mounted() {
			this.getData();
		},
		methods: {
			//获取个人信息
			getData() {
				let data = {
					token: localStorage.getItem("token"),
					data: {}
				};
				this.$api.person.userInfo(data).then((res) => {
					// 执行某些操作
					if (res.code == 200) {
						// this.level = res.data.cMemberLevelName;
						// this.cUserName = res.data.cUserName;
						// this.phone = res.data.cPhone;
						// this.cRealName = res.data.cRealName;
						// this.score = res.data.iPoints;
						// this.amount = res.data.fConsumeAmount;
						// this.dBirthday = res.data.dBirthday;
						// this.cQQ = res.data.cQQ;
						// this.avatar = res.data.cPortrait;
						this.data.uid = res.data.id;
						this.user = res.data;
						this.user.mid = res.data.id;
					}
				});
			},
			//保存个人信息
			userSave() {
				this.user.birthday = this.user.dBirthday
				this.user.NickName = this.NickName
				this.$api.person.userSave(this.user).then((res) => {
					console.log(res);
					if (res.code == 1) {
						this.$message({
							message: res.msg,
							type: "success",
						});
					} else {
						this.$message({
							message: res.msg,
							type: "success",
						});
					}
				});
			},
			uploadsuccess(response, file, fileList) {
				console.log(response, file, fileList);
				if (response.code == 1) {
					setTimeout(function() {
						window.location.reload();
					}, 1000);
				}
			},
			toUpdate(type){
				this.$router.push({path:'/person/updatePhone?type='+type})
			}
		},
	};
</script>

<style scoped lang="scss">
	.personBox {
		background-color: #fff;
		padding: 2.62rem 1.75rem 0;

		.header {
			color: #f0406f;
			font-size: 1.25rem;
			border-bottom: 0.06rem solid rgba(216, 216, 216, 1);
			overflow: hidden;
			height: 2.2rem;

			.title {
				position: relative;
				padding: 0.63rem 0.94rem;
				border-bottom: 0.31rem solid rgba(240, 64, 111, 1);
			}
		}

		.body {
			padding-bottom: 3.13rem;
			padding-top: 3.19rem;
			border-bottom: 0.06rem solid rgba(216, 216, 216, 1);

			.item_inline {
				display: flex;
				flex-direction: row;
				align-items: center;
				// margin: 1rem 0;
				line-height: 3.19rem;

				.label {
					width: 4.44rem;
					margin-right: 3.06rem;
					color: #666;
					font-size: 0.88rem;
				}

				.item {
					display: flex;
					flex-direction: row;
					align-items: center;
					color: #666;
					font-size: 0.88rem;

					img {
						width: 5.56rem;
						height: 5.56rem;
						border-radius: 50%;
						// background: #7E8C8D;
						vertical-align: middle;
					}

					input {
						width: 18.19rem;
						height: 2.44rem;
						outline: none;
						background: rgba(255, 255, 255, 1);
						border: 0.06px solid rgba(233, 233, 233, 1);
						text-indent: 0.69rem;
					}

					.edit {
						padding-left: 1.25rem;

						&:hover {
							color: #f0406f;
							text-decoration: underline;
							cursor: pointer;
						}
					}

					.edits {
						padding-left: 1.25rem;
						color: #f0406f;
						cursor: pointer;
					}
				}

				.sex_item {
					display: flex;
					flex-direction: row;

					>div {
						display: flex;
						flex-direction: row;
						align-items: center;
						padding-right: 1.13rem;

						.dot {
							width: 0.75rem;
							height: 0.75rem;
							margin-right: 0.56rem;
							background: rgba(22, 22, 22, 1);
							border-radius: 50%;

							&.active {
								background: rgba(240, 64, 111, 1);
							}
						}
					}
				}
			}
		}

		.footer {
			padding: 3.13rem 0 5.16rem;

			.submit {
				text-align: center;
				line-height: 3.19rem;
				font-size: 1.13rem;
				color: #fff;
				width: 12.38rem;
				height: 3.19rem;
				background: rgba(22, 22, 22, 1);
				cursor: pointer;

				&:hover {
					opacity: 0.8;
				}
			}
		}
	}
</style>
